<template>
  <div>
    <el-dialog
      v-bind="$attrs"
      width="500px"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @open="onOpen"
      v-on="$listeners"
    >
      <parser v-if="isShowParser" :form-conf="innerFormConf" ref="parser" @submit="submitForm"/>

      <div slot="footer">
        <el-button @click="close">
          取消
        </el-button>
        <el-button type="primary" @click="getFormData">
          获取数据
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import Parser from 'form-gen-parser'
  import { Message, MessageBox } from 'element-ui'

  export default {
    name: "ParserDialog",
    components: {
      Parser
    },
    inheritAttrs: false,
    props: ['formConf'],
    data() {
      return {
        innerFormConf: this.formConf,
        // 防止模型应重新渲染parser
        isShowParser: true
      }
    },
    computed: {
    },
    watch: {
      formConf(val){
        this.innerFormConf = val
      }
    },
    mounted() {
    },
    methods: {
      onOpen(){
        this.isShowParser = true
      },
      close(e) {
        this.isShowParser = false
        this.$emit('update:visible', false)
      },
      getFormData() {
        this.$refs.parser.submitForm();
      },
      submitForm(data) {
        this.$msgbox.alert(JSON.stringify(data))
      }
    }
  }
</script>
